<template>
  <div class="notifice-container" @click="viewMessage">
    <i class="el-icon-bell" :style="{fontSize:size + 'px'}" />
    <span class="num">{{formatValue}}</span>
  </div>
</template>

<script>
export default {
  name: "Notifice",
  props: {
    size:Number,
    value: {
      type: Number,
      default:0
    },
    maxValue: Number
  },
  computed: {
    formatValue() {
      return this.value > this.maxValue ? this.maxValue+'+' : this.value
    }
  },
  methods:{
    viewMessage() {
      this.$emit("viewMessage")
    }
  }
}
</script>

<style lang="scss" scoped>
  .notifice-container {
    position: relative;
    .num {
      position: absolute;
      top: 0;
      right: 0px;
      height: 18px;
      line-height: 18px;
      background-color: #ec3333;
      color: #ffffff;
      padding: 0 6px;
      font-size: 12px;
      border-radius: 10px;
      text-align: center;
      border: 1px solid #ffffff;
      transform: translateX(50%);
    }
  }
</style>
